<template>
    <div>
        <div className="top">
            <span @:click="search(el.value[0])" v-for="(el,index) in department" key="index">
                {{ el.value[0] }}
            </span>

            <span class="top_right" @:click="go('科室详情页路由')">
                全部科室
            </span>
        </div>
        <div className="down">
            <div class="fa" v-for="(el) in arr.slice(0,4)" @:click="go([el,'医生详情页'])">
                <!--obj.sql.slice(0,4)  obj.sql.slice(0,3)  数组中 [0-3)位-->
                <div class="cen">
                    <!-- <img :src="el.img" alt="" /> -->
                    <img  :src="'http://localhost:7001/public/'+el.img" alt="" />
                </div>
                <div class="cen" style="margin-top:16px;">
                    {{ el.title }}&nbsp;{{el.type}}
                </div>
                <div class="cen" style="margin-top:8px;color:#828993;font-size: 13px;">
                    {{ el.type2 }}
                </div>
                <div class="cen" style="margin-top:8px;color:#828993;font-size: 13px;">
                    {{ el.update }}
                </div>
                <div class="cen score" style="margin-top:16px;color:#828993;font-size: 13px;">
                    <span class="icon_sp" style="width:70px;position: absolute;left: 0; ">
                        <el-icon :style="{color:'gold',fontSize:'13px'}">
                            <StarFilled />
                        </el-icon>
                        233分
                    </span>
                    <span style="position: absolute;right: 0; ">{{ Math.floor(Math.random()*300 + 233) }} 月回答</span>
                </div>
                <div class="cen comments" style="margin-top:24px;color:#828993;font-size: 13px;">
                    {{ el.detail }}
                </div>
                <div class="cen btn" style="margin: 24px 0 0 51px;">
                    问医生&nbsp; $233
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, toRefs, onBeforeMount, onMounted } from "vue";
import store from "@/store/S_zc"
import axios from "axios";
import router from "@/router";


let department = toRefs(store().department_all.常见科室)

// 
let getdata, arr = ref([])

onMounted(async () => {
    getdata = await axios("/path/search", { params: { department: '皮肤科' } })
    arr.value = getdata.data.sql
    // console.log(arr.value)
})

async function search(arg: string) {
    let re: any = await axios("/path/search", { params: { department: arg } })
    arr.value = re.data.sql
    console.log('re', re.data.sql, arg)
}

// 路由跳转
function go(x) {

    console.log("thired.vue go() router.push", x)
    // router.push()

    // console.log("thired.vue router.push", x)
    router.push({path:'/Xyl',query:{id:x[0].id}})

}

</script>

<style scoped  lang="scss">
.top {
    width: 1120px;
    height: 24px;
    padding: 28px 30px;
    position: relative;

    border: 1px #F2F3F5 solid;
    border-color: transparent transparent #F2F3F5 transparent;

    span {
        width: 60px;
        height: 24px;
        margin-right: 52px;
        font-size: 20px;

        &:hover {
            text-decoration: underline;
            color: #00c792;
        }
    }

    .top_right {
        width: 64px;
        line-height: 24px;
        font-size: 16px;
        position: absolute;
        right: 0;


    }
}

.down {
    // width: ;
    padding: 40px 30px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}


.fa {
    width: 223px;
    height: 328px;
    padding: 32px 20px;
    border: 1px #e8e9eb solid;
    border-radius: 5px;

    &:hover {
        box-shadow: 3px 5px 10px #F2F3F5,
            -3px 5px 10px #F2F3F5;
    }
}

.cen {
    width: 100%;
    display: flex;
    justify-content: center;
}

.score {
    width: 140px;
    height: 16px;
    margin-left: 40px;
    position: relative;

    .icon_sp {
        &::after {
            content: "|";
            position: relative;
            left: 6px;
        }
    }
}

.comments {
    width: 223px;
    height: 42px;
    overflow: hidden;

    display: -webkit-box;
    line-height: 21px;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.btn {
    width: 120px;
    height: 38px;
    font-size: 16px;
    line-height: 38px;
    background-color: #00c792;
    color: white;
    border-radius: 5px;

    &:hover {
        filter: brightness(0.9);
    }
}

img {
    width: 82px;
    height: 82px;
    border-radius: 41px;
}
</style>